<%-- 
    Document   : index
    Created on : Oct 25, 2011, 12:20:36 PM
    Author     : javierpanchi
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Demo GPS plugin</title>
        <style>
            #map {
                width: 500px;
                height: 200px;
            }
        </style>
        <script type="text/javascript" src="/Drinkmeter/js/jquerygps.js"></script>
        <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true&amp;key=ABQIAAAAH98Kqhz5RYb4hjqrVA6qhhRY2Dx3LGuleOdB77j29-vf3RDfbRTA5YX2stuicNxmZsqJF8BqoYAbFg" type="text/javascript"></script>
        <script type="text/javascript" src="/Drinkmeter/js/gps.js"></script>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
        <link rel="stylesheet" href="/Drinkmeter/css/TabStyle.css">
        <script type="text/javascript">
            $(function() {

                $("#map").googleMap().load();

            });
        </script>
    </head>

    <body onunload="GUnload()">
        <div id="directions"></div>
        <div id="map"></div>
        <div data-role="page">
            <div data-role="header">
                <h1>Session Drinks</h1>
            </div><!-- /header -->
            <br>
            <div data-role="content">
                <form id="form1" action="directions.php" method="post">
                    <p><b>From: </b><input id="end" type="text" value="${current}" size="4"/><br/>
                        <b>To: </b><input id="start" type="text" size="4" value="${destination}"/></p>
                    <input name="submit" id="getdirections" type="submit" value="Get Directions" />
                </form>

                <div style="top: 310.5px;" class="ui-loader ui-body-a ui-corner-all"><span class="ui-icon ui-icon-loading spin"></span><h1>loading</h1></div>


                <script>
                    document.getElementById('form1').submit();
                </script>   
                <footer>
                    <div id='tabbarcontainer'>
                        <ul id='tabbar'>
                            <div id="mensajes"></div>
                            <li class='tab'><a href="#" id='tab_home' onclick="window.location='/Drinkmeter'">Tab 1</a></li>
                            <li class='tab'><a href="/Drinkmeter/FacebookServlet" id='tab_friends'>Tab 2</a></li>
                            <li class='tab'><a href="/Drinkmeter/jsp/drinks.jsp" id='tab_drinks'>Tab 3</a></li>
                            <li class='tab'><a href="/Drinkmeter/DrinksServlet?opt=report" id='tab_stats'>Tab 4</a></li>
                            <li class='tab'><a href="/Drinkmeter/jsp/leave.jsp" id='tab_locations'>Tab 5</a></li>
                        </ul>
                    </div>
                    <script type='text/javascript'>
                        $('li.tab a').bind('click', function(event) {
                            $('li.tab a').removeClass('active');
                            $(event.target).addClass('active');
                        });
                    </script>
                </footer>
            </div><!-- /content -->

        </div>
    </body>
</html>

